import React, { useMemo, useState } from "react";
import classnames from "classnames";
import "./index.scss";
const Tags = props => {
	const [currentIndex, setCurrentIndex] = useState(-1);
	let { availableAmount, onClick, btnQuickAmts } = props;
	console.log("this.btnQuickAmts==", btnQuickAmts);
	console.log("this.availableAmount==", availableAmount);
	// eslint-disable-next-line no-use-before-define
	availableAmount = format(availableAmount);
	btnQuickAmts = btnQuickAmts || [];
	return (
		<section className="xhd-loan-tags">
			<ul>
				{btnQuickAmts.map((item, index) => {
					let classNames = classnames({
						disabled: availableAmount < item.amtValue,
						active: index == currentIndex
					});
					let handleClick =
						availableAmount >= item.amtValue
							? () => {
									setCurrentIndex(index);
									onClick(item.amtValue);
							  }
							: null;
					return (
						<li
							key={item.amtValue}
							onClick={handleClick}
							className={classNames}
						>
							{item.btnValue}
						</li>
					);
				})}
			</ul>
		</section>
	);
};
function format(amount = "") {
	return +amount.replace(/,/, "");
}
export default Tags;
